<x-app>
    <x-slot:title>Волонтерская помощь</x-slot:title>

    <section class="max-w-screen-xl mx-auto px-2 ">
        <h2 class=" text-3xl md:text-6xl mb-4 font-semibold">Помощь волонтеров</h2>
        <div class="grid sm:grid-cols-2 grid-cols-1 gap-10 justify-between items-center">
            <p class="flex-grow-0 md:basis-1/2 md:text-4xl text-2xl">
            Здесь вы можете оставить заявку на бытовую помощь от наших волонтеров, позже с вами свяжутся
            </p>
            
            <form class=" flex flex-col flex-grow gap-6 max-w-screen-sm" method="POST" action="{{route('application')}}">
                @csrf
                <div class="flex flex-col">
                    <x-label for="fio" class="text-xl">Ваше ФИО</x-label>
                    <x-input required placeholder="Фамилия Имя Отчество" name="fio" id="fio"></x-input>
                </div>
                <div class="flex flex-col">

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div class="flex flex-col">
                            <x-label for="email" class="text-xl">Email</x-label>
                            <x-input type="email" required placeholder="Электронная почта" name="email" id="email"></x-input>
                        </div>
                        <div class="flex flex-col">
                            <x-label for="phone" class="text-xl">Телефон</x-label>
                            <x-input required placeholder="Номер телефона" name="phone" id="phone"></x-input>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col">
                    <x-label for="text" class="text-xl">Текст обращения</x-label>
                    <x-textarea name="text" required id="text" placeholder="Текст обращения"></x-textarea>
                </div>
                <p class="text-xl text-green-500">{{Session::get('success')}}</p>
                
                <x-button>Отправить</x-button>
            </form>
        </div>

    </section>
</x-app>
